Skip to content

feat(icons): updated caret icons to RH microns#12298

Open
thatblindgeye wants to merge 3 commits intopatternfly:mainfrom
thatblindgeye:iss12261_caretIcons
Open

feat(icons): updated caret icons to RH microns#12298
thatblindgeye wants to merge 3 commits intopatternfly:mainfrom
thatblindgeye:iss12261_caretIcons

Conversation

@thatblindgeye
Copy link
Copy Markdown
Contributor

@thatblindgeye thatblindgeye commented Mar 27, 2026

What: Closes #12261

Note that I did not update the up/down icons used in SearchInput, nor the caret icons used in DualListSelector/Pagination (or similar implementations that have actions with both single and double carets). There's core followup work to handle that first patternfly/patternfly#8197

Additional issues:

Summary by CodeRabbit

  • Style
    • Refreshed caret/chevron icons across the UI for visual consistency. Updated icons now appear in expandables, toggles, breadcrumbs, dropdowns, navigation controls, tabs, calendars, tables, tree views, wizards, notification groups, back-to-top and other interactive elements to provide a more unified look and feel.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 27, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 910d54ca-727e-4948-84cc-cf5f4b33529c

📥 Commits

Reviewing files that changed from the base of the PR and between 5f76cd3 and 9e8b1bb.

⛔ Files ignored due to path filters (21)
  • packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap is excluded by !**/*.snap, !**/generated/**
  • packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap is excluded by !**/*.snap, !**/generated/**
  • packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroup.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeViewListItem.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap is excluded by !**/*.snap
  • packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (43)
  • packages/code-connect/components/Breadcrumbs/ExpandableBreadcrumbs.figma.tsx
  • packages/react-core/src/components/Accordion/AccordionToggle.tsx
  • packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx
  • packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx
  • packages/react-core/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsx
  • packages/react-core/src/components/BackToTop/BackToTop.tsx
  • packages/react-core/src/components/Breadcrumb/BreadcrumbHeading.tsx
  • packages/react-core/src/components/Breadcrumb/BreadcrumbItem.tsx
  • packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md
  • packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx
  • packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
  • packages/react-core/src/components/Card/CardHeader.tsx
  • packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
  • packages/react-core/src/components/DataList/DataListToggle.tsx
  • packages/react-core/src/components/DataList/examples/DataList.md
  • packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx
  • packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
  • packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
  • packages/react-core/src/components/Form/FormFieldGroupToggle.tsx
  • packages/react-core/src/components/Icon/examples/Icon.md
  • packages/react-core/src/components/Icon/examples/IconBasic.tsx
  • packages/react-core/src/components/JumpLinks/JumpLinks.tsx
  • packages/react-core/src/components/Menu/MenuItem.tsx
  • packages/react-core/src/components/Menu/examples/Menu.md
  • packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx
  • packages/react-core/src/components/Nav/NavExpandable.tsx
  • packages/react-core/src/components/Nav/NavItem.tsx
  • packages/react-core/src/components/Nav/NavList.tsx
  • packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx
  • packages/react-core/src/components/Tabs/OverflowTab.tsx
  • packages/react-core/src/components/Tabs/Tabs.tsx
  • packages/react-core/src/components/TreeView/TreeViewListItem.tsx
  • packages/react-core/src/components/Wizard/WizardNavItem.tsx
  • packages/react-core/src/components/Wizard/WizardToggle.tsx
  • packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
  • packages/react-core/src/demos/DataListDemo.md
  • packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorTreeItem.tsx
  • packages/react-core/src/deprecated/components/Wizard/WizardNavItem.tsx
  • packages/react-core/src/deprecated/components/Wizard/WizardToggle.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/BreadcrumbDemo/BreadcrumbDemo.tsx
  • packages/react-table/src/components/Table/CollapseColumn.tsx
  • packages/react-table/src/components/Table/utils/decorators/treeRow.tsx
  • packages/react-table/src/demos/Table.md
✅ Files skipped from review due to trivial changes (39)
  • packages/react-core/src/components/Breadcrumb/BreadcrumbItem.tsx
  • packages/react-core/src/components/Alert/tests/AlertToggleExpandButton.test.tsx
  • packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md
  • packages/react-core/src/components/Wizard/WizardNavItem.tsx
  • packages/react-core/src/components/Tabs/OverflowTab.tsx
  • packages/react-core/src/components/Card/CardHeader.tsx
  • packages/code-connect/components/Breadcrumbs/ExpandableBreadcrumbs.figma.tsx
  • packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx
  • packages/react-table/src/components/Table/utils/decorators/treeRow.tsx
  • packages/react-core/src/components/Nav/NavExpandable.tsx
  • packages/react-core/src/components/Accordion/tests/AccordionToggle.test.tsx
  • packages/react-core/src/demos/DataListDemo.md
  • packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx
  • packages/react-core/src/components/BackToTop/BackToTop.tsx
  • packages/react-core/src/components/DataList/examples/DataList.md
  • packages/react-core/src/components/TreeView/TreeViewListItem.tsx
  • packages/react-core/src/components/Accordion/AccordionToggle.tsx
  • packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
  • packages/react-core/src/components/Menu/examples/Menu.md
  • packages/react-core/src/deprecated/components/Wizard/WizardNavItem.tsx
  • packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx
  • packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
  • packages/react-core/src/components/DataList/DataListToggle.tsx
  • packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
  • packages/react-core/src/components/Form/FormFieldGroupToggle.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorTreeItem.tsx
  • packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx
  • packages/react-core/src/components/Wizard/WizardToggle.tsx
  • packages/react-core/src/components/Menu/MenuItem.tsx
  • packages/react-core/src/components/JumpLinks/JumpLinks.tsx
  • packages/react-core/src/deprecated/components/Wizard/WizardToggle.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/BreadcrumbDemo/BreadcrumbDemo.tsx
  • packages/react-table/src/demos/Table.md
  • packages/react-core/src/components/Nav/NavItem.tsx
  • packages/react-core/src/components/Icon/examples/IconBasic.tsx
  • packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx
  • packages/react-table/src/components/Table/CollapseColumn.tsx
  • packages/react-core/src/components/Tabs/Tabs.tsx
  • packages/react-core/src/components/Nav/NavList.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
  • packages/react-core/src/components/Icon/examples/Icon.md
  • packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
  • packages/react-core/src/components/Breadcrumb/BreadcrumbHeading.tsx
  • packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

Walkthrough

This PR systematically replaces Angle* caret icons with RhMicronsCaret* icons across many PatternFly React components and examples; no public APIs or component behavior are changed.

Changes

Cohort / File(s) Summary
Accordion & Expandable
packages/react-core/src/components/Accordion/.../AccordionToggle.tsx, packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx, packages/react-core/src/components/ExpandableSection/.../*.tsx, packages/react-core/src/components/Card/CardHeader.tsx, packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx, packages/react-core/src/components/DataList/.../DataListToggle.tsx
Replaced AngleRight/AngleDown toggle icons with RhMicronsCaretDownIcon (and updated corresponding test mocks).
Breadcrumbs
packages/react-core/src/components/Breadcrumb/.../*.tsx, packages/react-core/src/components/Breadcrumb/examples/*, packages/code-connect/components/Breadcrumbs/ExpandableBreadcrumbs.figma.tsx, packages/react-integration/demo-app-ts/src/components/demos/BreadcrumbDemo/BreadcrumbDemo.tsx
Replaced AngleRight/AngleLeft icons with RhMicronsCaretRightIcon/RhMicronsCaretLeftIcon for dividers and dropdown item icons.
Navigation & Scroll Controls
packages/react-core/src/components/BackToTop/BackToTop.tsx, packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx, packages/react-core/src/components/Nav/.../*.tsx, packages/react-core/src/components/Tabs/Tabs.tsx, packages/react-core/src/components/Nav/NavList.tsx
Swapped AngleUp/Left/Right/RightIcon to RhMicronsCaretUp/Left/Right/Down variants for back/forward and expand toggles.
Menus & Drilldown
packages/react-core/src/components/Menu/.../*.tsx, packages/react-core/src/components/Menu/examples/*
Replaced AngleLeft/AngleRight with RhMicronsCaretLeftIcon/RhMicronsCaretRightIcon for flyout/drillout icons.
Data display & tree toggles
packages/react-core/src/components/TreeView/.../*.tsx, packages/react-core/src/components/DualListSelector/.../*.tsx, packages/react-table/src/components/Table/CollapseColumn.tsx, packages/react-table/src/components/Table/utils/decorators/treeRow.tsx
Replaced AngleRight/AngleDown icons with RhMicronsCaretDownIcon for expand/collapse toggles.
Expandable UI & overflow
packages/react-core/src/components/JumpLinks/JumpLinks.tsx, packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx, packages/react-core/src/components/Tabs/OverflowTab.tsx, packages/react-core/src/components/Form/FormFieldGroupToggle.tsx, packages/react-core/src/components/ClipboardCopy/...
Replaced AngleRightIcon with RhMicronsCaretDownIcon for various expandable/overflow toggles.
Wizard & separators (current & deprecated)
packages/react-core/src/components/Wizard/*.tsx, packages/react-core/src/deprecated/components/Wizard/*.tsx
Replaced AngleRightIcon with RhMicronsCaretDownIcon for nav toggles and used RhMicronsCaretRightIcon wrapped in a separator for sub-step separators.
Docs & examples
packages/react-core/src/components/Icon/examples/*, packages/react-core/src/components/DataList/examples/*, packages/react-core/src/demos/*, packages/react-table/src/demos/Table.md
Updated example and demo imports/usages from Angle* icons to RhMicronsCaret* icons.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~20 minutes

Possibly related issues

  • #12261: Updated caret icons to rh-microns — This PR implements the requested replacements and the wizard separator span change.
  • Unified theme caret icon followup patternfly#8197 — Broad caret icon replacements across the project; changes here align with that objective.

Possibly related PRs

Suggested reviewers

  • mcoker
  • nicolethoen
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat(icons): updated caret icons to RH microns' clearly and accurately summarizes the main change across all modified files—replacing various angle icons with RH microns caret icons.
Linked Issues check ✅ Passed All code changes align with issue #12261 requirements: caret icons (AngleLeftIcon, AngleRightIcon, AngleDownIcon, AngleUpIcon) are systematically replaced with RhMicrons equivalents across components, with WizardToggle separator correctly wrapping the icon in a span with the appropriate class.
Out of Scope Changes check ✅ Passed All changes are in-scope: icon replacements in components are covered by #12261, and explicitly excluded items (DualListSelector, Pagination up/down icons in SearchInput) are not modified as per issue requirements.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented Mar 27, 2026

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🧹 Nitpick comments (1)
packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx (1)

220-220: Consider centralizing the default expandable caret icon.

ExpandableSection now defaults toggleIcon via props, while ExpandableSectionToggle (detached mode) still hardcodes its own icon. Keeping both wired to one shared constant would reduce drift risk in future icon updates.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx`
at line 220, The default caret icon is duplicated: ExpandableSection sets
toggleIcon inline while ExpandableSectionToggle hardcodes its own icon; create a
single exported constant (e.g., DEFAULT_TOGGLE_ICON) and use it in both places
so both ExpandableSection's default prop and ExpandableSectionToggle reference
the same symbol (update ExpandableSection's prop default and Replace the
hardcoded icon in ExpandableSectionToggle with DEFAULT_TOGGLE_ICON).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/react-core/src/components/Icon/examples/Icon.md`:
- Around line 10-11: The imports in Icon.md for RhMicronsCaretRightIcon and
RhMicronsCaretDownIcon will fail because the mappings in pfToRhIcons.mjs for the
rh-microns-caret icons are commented out; either re-enable those mappings in
pfToRhIcons.mjs so the rh-microns-caret-right-icon and
rh-microns-caret-down-icon modules are generated from rhIconsMicrons.mjs, or
update Icon.md to import the active icons RhUiCaretRightIcon and
RhUiCaretDownIcon (using rh-ui-caret-right and rh-ui-caret-down) which map to
CaretRightIcon and CaretDownIcon. Ensure you modify either pfToRhIcons.mjs
(uncomment mappings for CaretRightIcon/CaretDownIcon) or Icon.md (change import
identifiers and module names to the rh-ui-caret variants).

In `@packages/react-core/src/components/Icon/examples/IconBasic.tsx`:
- Around line 4-5: The project imports RhMicronsCaretRightIcon and
RhMicronsCaretDownIcon in IconBasic.tsx but the corresponding mappings in
pfToRhIcons.mjs are commented out, preventing export; open pfToRhIcons.mjs and
uncomment the mappings that bind CaretLeftIcon, CaretRightIcon, and CaretUpIcon
to their rh-microns variants (matching the definitions in rhIconsMicrons.mjs) so
the rh-microns-caret-right and rh-microns-caret-down icons are exported and
available to IconBasic.tsx, or alternatively replace those imports in
IconBasic.tsx with available PF icon symbols if you prefer not to re-enable the
mappings.

In `@packages/react-core/src/deprecated/components/Wizard/WizardToggle.tsx`:
- Line 91: The deprecated WizardToggle component currently applies the
wizardToggleSeparator class directly to RhMicronsCaretRightIcon; update the JSX
in the WizardToggle (the conditional rendering using activeStepSubName and
RhMicronsCaretRightIcon) to wrap the icon in a span element with
className={css(styles.wizardToggleSeparator)} and render the icon inside that
span (remove the className from RhMicronsCaretRightIcon), matching the
non-deprecated WizardToggle pattern.

In `@packages/react-table/src/components/Table/utils/decorators/treeRow.tsx`:
- Line 7: The current import uses the microns caret icon; replace the import of
RhMicronsCaretDownIcon from
'@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon' with
RhUiCaretDownIcon imported from
'@patternfly/react-icons/dist/esm/icons/rh-ui-caret-down-icon' and update any
usages/JSX that reference RhMicronsCaretDownIcon (e.g., the tree row
expand/collapse renderer or component that renders the caret) to use
RhUiCaretDownIcon so the correct UI icon (rh-ui-caret-down) and its dimensions
are used.

---

Nitpick comments:
In `@packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx`:
- Line 220: The default caret icon is duplicated: ExpandableSection sets
toggleIcon inline while ExpandableSectionToggle hardcodes its own icon; create a
single exported constant (e.g., DEFAULT_TOGGLE_ICON) and use it in both places
so both ExpandableSection's default prop and ExpandableSectionToggle reference
the same symbol (update ExpandableSection's prop default and Replace the
hardcoded icon in ExpandableSectionToggle with DEFAULT_TOGGLE_ICON).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 16b39385-e4cb-40ba-9438-c4291a374fc4

📥 Commits

Reviewing files that changed from the base of the PR and between 4e03cd7 and 5f76cd3.

⛔ Files ignored due to path filters (21)
  • packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap is excluded by !**/*.snap, !**/generated/**
  • packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap is excluded by !**/*.snap, !**/generated/**
  • packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroup.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeViewListItem.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap is excluded by !**/*.snap
  • packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (43)
  • packages/code-connect/components/Breadcrumbs/ExpandableBreadcrumbs.figma.tsx
  • packages/react-core/src/components/Accordion/AccordionToggle.tsx
  • packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx
  • packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx
  • packages/react-core/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsx
  • packages/react-core/src/components/BackToTop/BackToTop.tsx
  • packages/react-core/src/components/Breadcrumb/BreadcrumbHeading.tsx
  • packages/react-core/src/components/Breadcrumb/BreadcrumbItem.tsx
  • packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md
  • packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx
  • packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
  • packages/react-core/src/components/Card/CardHeader.tsx
  • packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
  • packages/react-core/src/components/DataList/DataListToggle.tsx
  • packages/react-core/src/components/DataList/examples/DataList.md
  • packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx
  • packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
  • packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
  • packages/react-core/src/components/Form/FormFieldGroupToggle.tsx
  • packages/react-core/src/components/Icon/examples/Icon.md
  • packages/react-core/src/components/Icon/examples/IconBasic.tsx
  • packages/react-core/src/components/JumpLinks/JumpLinks.tsx
  • packages/react-core/src/components/Menu/MenuItem.tsx
  • packages/react-core/src/components/Menu/examples/Menu.md
  • packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx
  • packages/react-core/src/components/Nav/NavExpandable.tsx
  • packages/react-core/src/components/Nav/NavItem.tsx
  • packages/react-core/src/components/Nav/NavList.tsx
  • packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx
  • packages/react-core/src/components/Tabs/OverflowTab.tsx
  • packages/react-core/src/components/Tabs/Tabs.tsx
  • packages/react-core/src/components/TreeView/TreeViewListItem.tsx
  • packages/react-core/src/components/Wizard/WizardNavItem.tsx
  • packages/react-core/src/components/Wizard/WizardToggle.tsx
  • packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
  • packages/react-core/src/demos/DataListDemo.md
  • packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorTreeItem.tsx
  • packages/react-core/src/deprecated/components/Wizard/WizardNavItem.tsx
  • packages/react-core/src/deprecated/components/Wizard/WizardToggle.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/BreadcrumbDemo/BreadcrumbDemo.tsx
  • packages/react-table/src/components/Table/CollapseColumn.tsx
  • packages/react-table/src/components/Table/utils/decorators/treeRow.tsx
  • packages/react-table/src/demos/Table.md

Comment on lines +10 to +11
import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Check if rh-microns-caret icon files exist in the react-icons package

# Check for the icon files
fd -t f 'rh-microns-caret-right-icon' packages/react-icons
fd -t f 'rh-microns-caret-down-icon' packages/react-icons

# Also check the mapping configuration
echo "=== Mapping file status ==="
cat packages/react-icons/scripts/icons/pfToRhIcons.mjs | grep -A2 -B2 'rh-microns-caret'

Repository: patternfly/patternfly-react

Length of output: 752


🏁 Script executed:

#!/bin/bash

# 1. Search for any files containing 'rh-microns-caret' in the dist directory
echo "=== Searching for rh-microns-caret files in dist ==="
fd -t f 'rh-microns-caret' packages/react-icons/dist 2>/dev/null || echo "No matches found in dist"

# 2. Check the complete pfToRhIcons.mjs file to see all caret mappings
echo -e "\n=== All caret-related mappings in pfToRhIcons.mjs ==="
grep -i 'caret' packages/react-icons/scripts/icons/pfToRhIcons.mjs | head -20

# 3. Search for icon files directory structure
echo -e "\n=== ESM icons directory structure ==="
ls -la packages/react-icons/dist/esm/icons/ 2>/dev/null | grep caret || echo "No caret files found"

# 4. Check if the icons package even exists and has the expected structure
echo -e "\n=== Checking packages/react-icons structure ==="
ls packages/react-icons/dist/esm/ 2>/dev/null | head -10

Repository: patternfly/patternfly-react

Length of output: 2003


🏁 Script executed:

#!/bin/bash

# 1. Check for rh-ui-caret icon files
echo "=== Checking for rh-ui-caret icon files ==="
fd 'rh-ui-caret-right-icon|rh-ui-caret-down-icon' packages/react-icons/dist/esm/icons/

# 2. Look at more context of Icon.md to understand the intent
echo -e "\n=== Icon.md file context (lines 1-30) ==="
head -30 packages/react-core/src/components/Icon/examples/Icon.md

# 3. Check what this example is doing with these icons
echo -e "\n=== Icon.md context around lines 10-11 (showing 30 lines) ==="
sed -n '1,50p' packages/react-core/src/components/Icon/examples/Icon.md

Repository: patternfly/patternfly-react

Length of output: 3265


🏁 Script executed:

#!/bin/bash

# Check if dist directory exists and what the actual structure is
echo "=== React-icons package structure ==="
ls -la packages/react-icons/ | head -20

# Check if there's a src or source directory with icon definitions
echo -e "\n=== Searching for icon sources ==="
find packages/react-icons -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" 2>/dev/null | grep -i "caret" | head -10

# Check the actual Icon imports being used in other example files to understand the pattern
echo -e "\n=== Other icon imports in Icon examples ==="
grep -h "import.*Icon from.*react-icons" packages/react-core/src/components/Icon/examples/*.md | sort | uniq | head -15

Repository: patternfly/patternfly-react

Length of output: 1863


🏁 Script executed:

#!/bin/bash

# Check the src directory structure
echo "=== React-icons src directory structure ==="
ls -la packages/react-icons/src/

# Look for any caret-related icon definitions in src
echo -e "\n=== Searching for caret icon definitions in src ==="
find packages/react-icons/src -type f | head -20

# Check if there are icon files in src directory
echo -e "\n=== Icon files in react-icons/src ==="
ls packages/react-icons/src/ 2>/dev/null || echo "src directory empty or missing"

# Check git status to see what changed in this PR
echo -e "\n=== Git status of Icon.md ==="
git diff packages/react-core/src/components/Icon/examples/Icon.md 2>/dev/null | head -50 || echo "No git diff available"

Repository: patternfly/patternfly-react

Length of output: 693


🏁 Script executed:

#!/bin/bash

# Check the scripts directory where icon mappings are handled
echo "=== React-icons scripts directory ==="
ls -la packages/react-icons/scripts/

# Check what's in the icons scripts subdirectory
echo -e "\n=== Icons script contents ==="
ls -la packages/react-icons/scripts/icons/

# Look at the complete pfToRhIcons.mjs to understand which icons are actually available
echo -e "\n=== Active (non-commented) caret mappings in pfToRhIcons.mjs ==="
grep 'CaretRightIcon\|CaretDownIcon' packages/react-icons/scripts/icons/pfToRhIcons.mjs | grep -v '//'

# Check git log to see if rh-microns-caret icons were recently added/changed
echo -e "\n=== Recent changes to pfToRhIcons.mjs ==="
git log --oneline -n 10 packages/react-icons/scripts/icons/pfToRhIcons.mjs 2>/dev/null || echo "Git log not available"

# Look for any npm or build scripts that generate the icons
echo -e "\n=== Package.json scripts ==="
grep -A 20 '"scripts"' packages/react-icons/package.json

Repository: patternfly/patternfly-react

Length of output: 2493


🏁 Script executed:

#!/bin/bash

# Check if rh-microns-caret icons are defined in rhIconsMicrons.mjs
echo "=== Searching for rh-microns-caret in rhIconsMicrons.mjs ==="
grep -i 'rh-microns-caret' packages/react-icons/scripts/icons/rhIconsMicrons.mjs | head -10

# Check the size and content overview of rhIconsMicrons.mjs
echo -e "\n=== First 30 lines of rhIconsMicrons.mjs ==="
head -30 packages/react-icons/scripts/icons/rhIconsMicrons.mjs

# Check git diff to see what changed in this commit for caret icons
echo -e "\n=== Git diff for caret-related changes ==="
git log -1 --stat 5f76cd3a 2>/dev/null | head -20

# Check the actual diff for the specific commit
echo -e "\n=== Details of caret updates in latest commit ==="
git show 5f76cd3a --name-only 2>/dev/null || echo "Unable to fetch git show"

Repository: patternfly/patternfly-react

Length of output: 50384


🏁 Script executed:

#!/bin/bash

# Get the specific diff for Icon.md in the commit
echo "=== Git diff for Icon.md in the commit ==="
git show 5f76cd3a -- packages/react-core/src/components/Icon/examples/Icon.md 2>/dev/null | head -100

# Also check if these icon files would be generated
echo -e "\n=== Checking if rh-microns-caret icons should be in export ==="
grep -r "rh-microns-caret" packages/react-icons/scripts/ --include="*.mjs" | grep -v "^//" | head -20

Repository: patternfly/patternfly-react

Length of output: 4179


The rh-microns-caret icon imports will fail because the export mappings are disabled.

While the icon data exists in rhIconsMicrons.mjs, the mappings for CaretRightIcon and CaretDownIcon in pfToRhIcons.mjs are commented out. This prevents the build process from generating the rh-microns-caret-right-icon and rh-microns-caret-down-icon files in the distribution. The imports at lines 10-11 will fail at build or runtime.

Either:

  • Uncomment the rh-microns-caret mappings in pfToRhIcons.mjs, or
  • Change Icon.md to use the active caret icons: rh-ui-caret-right and rh-ui-caret-down (which map to CaretRightIcon and CaretDownIcon)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/react-core/src/components/Icon/examples/Icon.md` around lines 10 -
11, The imports in Icon.md for RhMicronsCaretRightIcon and
RhMicronsCaretDownIcon will fail because the mappings in pfToRhIcons.mjs for the
rh-microns-caret icons are commented out; either re-enable those mappings in
pfToRhIcons.mjs so the rh-microns-caret-right-icon and
rh-microns-caret-down-icon modules are generated from rhIconsMicrons.mjs, or
update Icon.md to import the active icons RhUiCaretRightIcon and
RhUiCaretDownIcon (using rh-ui-caret-right and rh-ui-caret-down) which map to
CaretRightIcon and CaretDownIcon. Ensure you modify either pfToRhIcons.mjs
(uncomment mappings for CaretRightIcon/CaretDownIcon) or Icon.md (change import
identifiers and module names to the rh-ui-caret variants).

Comment on lines +4 to +5
import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Verify rh-microns-caret icon files are available

# Search for the icon source files
fd -t f 'rh-microns-caret-right-icon' packages/react-icons
fd -t f 'rh-microns-caret-down-icon' packages/react-icons

# Check if the icons are exported from the package
echo "=== Checking package exports ==="
rg -n "rh-microns-caret-(right|down)" packages/react-icons/dist/esm/icons/ 2>/dev/null || echo "Icon files not found in dist"

Repository: patternfly/patternfly-react

Length of output: 132


🏁 Script executed:

# Locate and examine pfToRhIcons.mjs
find . -name "pfToRhIcons.mjs" -type f

Repository: patternfly/patternfly-react

Length of output: 123


🏁 Script executed:

# Check the IconBasic.tsx file to see the exact imports
cat -n packages/react-core/src/components/Icon/examples/IconBasic.tsx | head -20

Repository: patternfly/patternfly-react

Length of output: 955


🏁 Script executed:

# Search for the mapping configuration to understand the icon mapping
rg -n "rh-microns-caret" --type mjs

Repository: patternfly/patternfly-react

Length of output: 98


🏁 Script executed:

# Read the pfToRhIcons.mjs file
cat packages/react-icons/scripts/icons/pfToRhIcons.mjs

Repository: patternfly/patternfly-react

Length of output: 26546


🏁 Script executed:

# Search for rh-microns-caret without file type restriction
rg -n "rh-microns-caret"

Repository: patternfly/patternfly-react

Length of output: 10306


The rh-microns-caret icon mappings must be uncommented in pfToRhIcons.mjs before merging.

The icon definitions for rh-microns-caret-right and rh-microns-caret-down exist in rhIconsMicrons.mjs, but the corresponding mappings in pfToRhIcons.mjs (lines 263-265) are commented out. This prevents these icons from being exported and available in the built package. The code in IconBasic.tsx imports these icons, but they are not accessible. Uncomment the mappings for CaretLeftIcon, CaretRightIcon, and CaretUpIcon using the rh-microns variants, or use alternative icons, before merging.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/react-core/src/components/Icon/examples/IconBasic.tsx` around lines
4 - 5, The project imports RhMicronsCaretRightIcon and RhMicronsCaretDownIcon in
IconBasic.tsx but the corresponding mappings in pfToRhIcons.mjs are commented
out, preventing export; open pfToRhIcons.mjs and uncomment the mappings that
bind CaretLeftIcon, CaretRightIcon, and CaretUpIcon to their rh-microns variants
(matching the definitions in rhIconsMicrons.mjs) so the rh-microns-caret-right
and rh-microns-caret-down icons are exported and available to IconBasic.tsx, or
alternatively replace those imports in IconBasic.tsx with available PF icon
symbols if you prefer not to re-enable the mappings.

Copy link
Copy Markdown
Contributor

@mcoker mcoker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Ran visual regressions against main with the latest core prerelease if anyone wants to see the diff

PDF report

Full report - unzip and open "html_report/index.html"

Copy link
Copy Markdown

@kaylachumley kaylachumley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Updated caret icons to rh-microns

4 participants